<template>
  <div class="active-panel" :style="positionStyle">
    <div class="panel-header" ref="panelHeader">
      <div class="panel-header__title">{{ title }}</div>
      <!-- <i class="panel-header__close el-icon-close" @click="closePanel" /> -->
      <div class="panel-header__close" @click="closePanel">×</div>
    </div>
    <div class="panel-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  onUnmounted,
  defineEmits,
  defineProps,
} from "vue";

const { title, position, width } = defineProps({
  // 标题
  title: {
    type: String,
    default: "活动面板",
  },

  // 初始位置
  position: {
    type: Object,
    default: () => ({
      top: "5%",
      left: "5%",
    }),
  },

  // 宽度
  width: {
    type: String,
    default: "300px",
  },
});
const $emit = defineEmits(["close"]);

//面板头部Dom
const panelHeader = ref(null);

const positionStyle = reactive({
  ...position,
  width,
});

// 自由拖动面板

const dragConfig = reactive({
  isDragging: false,
  offsetX: 0,
  offsetY: 0,
});

onMounted(() => {
  // 监听鼠标按下事件
  panelHeader.value.addEventListener("mousedown", handleDraggableMouseDown);

  // 监听鼠标移动事件
  window.addEventListener("mousemove", handleDraggableMouseMove);

  // 监听鼠标松开事件
  window.addEventListener("mouseup", handleDraggableMouseUp);
});

onUnmounted(() => {
  panelHeader.value.removeEventListener("mousedown", handleDraggableMouseDown);

  // 移除鼠标移动事件
  window.removeEventListener("mousemove", handleDraggableMouseMove);

  // 移除鼠标松开事件
  window.removeEventListener("mouseup", handleDraggableMouseUp);
});

function handleDraggableMouseDown(e) {
  dragConfig.isDragging = true;
  // 计算鼠标相对于面板左上角的偏移量
  dragConfig.offsetX = e.clientX - panelHeader.value.parentNode.offsetLeft;
  dragConfig.offsetY = e.clientY - panelHeader.value.parentNode.offsetTop;
}

function handleDraggableMouseMove(e) {
  if (dragConfig.isDragging) {
    // 根据鼠标移动的偏移量更新面板的位置
    positionStyle.left = e.clientX - dragConfig.offsetX + "px";
    positionStyle.top = e.clientY - dragConfig.offsetY + "px";
    positionStyle.right = "auto";
    positionStyle.bottom = "auto";
  }
}

function handleDraggableMouseUp() {
  dragConfig.isDragging = false;
}

// 关闭面板
function closePanel() {
  $emit("close");
}
</script>

<style lang="less" scoped>
.active-panel {
  position: fixed;
  min-height: 100px;
  min-width: 100px;
  padding: 10px;
  border: 3px solid #3d9ccc;
  user-select: none;
  z-index: 999;
  background-color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(89, 89, 89, 0.5);
  border-radius: 5px;

  --fonSize-title: 14px;
  --fontSize-subTitle: 13px;
  --fontSize-content: 12x;
  --fontSize-number: 13px;
  --font-size-icon: 20px;
  .panel-header {
    display: flex;
    align-items: center;
    height: 30px;
    background-color: #3d98c5;
    margin-bottom: 10px;
    padding: 0 20px;
    font-weight: bold;
    color: #fff;
    cursor: move;
    &__title {
      font-size: var(--fonSize-title);
    }
    &__close {
      margin-left: auto;
      font-size: var(--font-size-icon);
      cursor: pointer;
    }
  }
  .panel-content {
  }
}
</style>
